import { defineComponent, watch, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const
// 定义主体
export default defineComponent({
    props: PropsType,
    setup(props) {
      // 定义 ref
      const chartRef = ref()
      // 配置项
      let options = {}
  
      // 监听
      watch(
        () => props.cdata,
        (val: any) => {
            options = {
                tooltip:{
                trigger: 'axis', // 触发类型：坐标轴触发
                    axisPointer: {
                        type: 'line' // 指示器类型：直线指示器
                    }
                },
                xAxis: {
                type: 'category',
                data: val.category,
                show:false
                },
                yAxis: {
                type: 'value',
                show:false,
                splitNumber: 3000,
                min:0,
                max:5
                },
                title: {
                left: 'center',
                text: '入院趋势',
                textStyle: {
                    color: '#82D4E2', // 标题颜色
                    fontSize: 18, // 标题字体大小
                    fontFamily: '幼圆',
                    fontStyle:'italic'
                }
                },
                series: [
                {
                    data: val.barData,
                    type: 'line',
                    markPoint: {
                        data: [
                            // 这里的 name 是标记点的名称，coord 是对应的坐标
                            // 第一个数据点对应的是数组中的第一个数据（索引为 0）
                            {type: 'max', name: '最大值'},
                        ]
                    },
                    smooth: true,
                    symbol: 'none',
                    //areaStyle: {},
                    areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                        offset: 0,
                        color: 'rgb(0, 70, 131)'
                        },
                        {
                        offset: 1,
                        color: 'rgb(0, 0, 12)'
                        }
                    ])
                    },
                
                }
                ]
            }
          // 手动触发更新
          if (chartRef.value) {
            // 通过初始化参数打入数据
            chartRef.value.initChart(options)
          }
        },
        {
          immediate: true,
          deep: true
        }
      )
  
      return () => {
        const height = "300px"
        const width = "100%"
  
        return <div>
          <echart ref={chartRef} height={height} width={width} />
        </div>
      }
    }
  })